<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane :label="item.tab+'('+item.total+')'" :name="item.name" v-for="item in tabs" :key='item.id'>

      </el-tab-pane>
    </el-tabs>
    <div class="filter-container filter-container-left">
      <el-form :inline="true" label-width='90px'>
        <el-form-item label="企业名称：" class="flex_box">
          <el-input v-model="queryParam.name" placeholder="请输入企业名称" clearable class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="账号：" class="flex_box">
          <el-input v-model="queryParam.mobile" placeholder="请输入账号" clearable class="filter-item"></el-input>
        </el-form-item>
        <el-form-item label="认证时间：" class="flex_box">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item"
            @change='timeChange'
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item search" type='primary' icon="iconfont icon-sousuo" @click="handleSearch">查询</el-button>
          <el-button class="filter-item search" type="info" plain icon="iconfont icon-zhongzhi" @click="handleRefresh">重置</el-button>
          <el-button class="filter-item" type="warning" icon="el-icon-plus" @click="handleCreate">添加企业</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='80' align='center'/> -->
      <el-table-column prop="name" label="企业名称" align='center'/>
      <el-table-column prop="user_info.mobile" label="账号" align='center' width='120'/>
      <el-table-column prop="post_count" label="招聘岗位数" align='center' width='110' />
      <el-table-column prop="top_post_count" label="置顶岗位数"  align='center' width='110'/>
      <el-table-column prop="post_number_count" label="招聘人数"  align='center' width='100'/>
      <el-table-column label="推广" align='center' width='130'>
        <template slot-scope="item">
          <el-switch
            v-model="item.row.is_hot"
            :active-value="1"
            :inactive-value="0"
            active-text='热门'
            @change="companyUpdate(item.row,'is_hot')"/>
        </template>
      </el-table-column>
      <el-table-column label="认证时间" align='center' width='140'>
        <template slot-scope="status">
          <span>{{status.row.status==1?status.row.update_time:''}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="last_browse_date" label="最后访问时间" v-if="queryParam.status==1" align='center' width='140'/>
      <el-table-column label="审核状态" align='center' width='110'>
        <template slot-scope="status">
          <span>{{status.row.status==1?'审核通过':status.row.status==2?'已驳回':'审核中'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='300' align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" v-if="item.row.status==0" @click="handleExamine(item.row)" :underline="false"><i class="iconfont icon-shenhe1"></i>审核</el-link>
          <el-link type="primary" class="table_btn" @click="handleDetails(item.row.id)" :underline="false"><i class="iconfont icon-chakanxiangqing"></i>查看</el-link>
          <el-link type="primary" class="table_btn" @click="handleUpdate(item.row)" :underline="false"><i class="iconfont icon-bianji"></i>编辑</el-link>
          <el-link type="danger" class="table_btn" @click="handleDelete(item.row.id)" :underline="false"><i class="iconfont icon-lajitong1"></i>删除</el-link>
          <el-link type="danger" class="table_btn"  v-if="queryParam.status==1" @click="browseList(item.row.id)" :underline="false"><i class="iconfont icon-lajitong1"></i>被访问</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <companyExamine ref='companyExamine' @companyUpdate='companyUpdate'></companyExamine>
    <el-dialog :visible.sync="formVisible" width="654px" @close="handleCancel" class="dialog_details">
      <div slot="title" class="dialog-title">{{title}}</div>
      <el-card class="el-card-border">
        <el-form :ref="formName" :model="formFieldsData" :rules="rules" label-width="150px" :label-position="labelPosition">
          <el-form-item label="账号：" prop="mobile">
            <el-input v-model="formFieldsData.mobile" clearable />
          </el-form-item>
          <el-form-item label="企业名称：" prop="license_name">
            <el-input v-model="formFieldsData.license_name" @input="formFieldsData.name=formFieldsData.license_name" clearable />
          </el-form-item>
          <el-form-item label="统一社会信用代码：">
            <el-input v-model="formFieldsData.credit_code" clearable />
          </el-form-item>
          <el-form-item label="营业执照照片：">
            <div class="flex_box">
              <el-upload action="" :show-file-list="false" :http-request="upImg" class="photo_box">
                <p class="img" :style="'background-image:url('+getImg(formFieldsData.business_license)+')'"></p>
                <el-button type='primary'>点击上传</el-button>
              </el-upload>
            </div>
          </el-form-item>
          <!-- <p>补充信息：</p> -->
          <el-form-item label="公司LOGO：">
            <div class="flex_box">
              <el-upload action="" :show-file-list="false" :http-request="upImg1" class="photo_box">
                <p class="img" :style="'background-image:url('+getImg(formFieldsData.company_logo)+')'"></p>
                <el-button type='primary'>点击上传主页</el-button>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="公司介绍：">
            <el-input type="textarea" v-model="formFieldsData.desc"></el-input>
          </el-form-item>
          <el-form-item label="工作环境">
            <div class="flex_box_wrap">
              <div class="photo_box" v-for="(item,index) in imgs" :key='index'>
                <p class="img" :style="'background-image:url('+getImg(item)+')'"></p>
              </div>
              <el-upload action="" :show-file-list="false" :http-request="upImg2" class="photo_box">
                <img :src="defaultUpImg" alt="" class="img">
                <el-button type='primary'>点击上传主页</el-button>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size='medium'>取 消</el-button>
        <el-button type="primary" @click="companySubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import companyExamine from '@/views/talents/components/companyExamine'
import {uploadImage,addCompany} from '@/api/talent.js'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/profession/admin/company', // 企业接口
      tabs:[
        {id:-1,tab:'所有企业',name:'first',total:0},
        {id:0,tab:'待审核',name:'second',total:0},
        {id:1,tab:'已通过',name:'third',total:0},
        {id:2,tab:'已驳回',name:'fourth',total:0}
      ],
      activeName: 'first',// tabs默认第几个展开
      queryParam: {
        name: '',
        mobile: '',
        start_time:'',
        end_time:'',
        page:1,
        page_size:10,
        status:-1,
        is_task:''
      },
      time:'',
      defaultQueryParam:['page','page_size','status'],
      formName:'addCompanyForm', // 添加企业form ref
      statusList:[
        {id:'0',name:'待审核'},
        {id:'1',name:'审核通过'},
        {id:'2',name:'审核驳回'}
      ], // 审核状态
      formFieldsData: {
        name:'',
        license_name: '',
        mobile:'',
        credit_code:'',
        business_license:'',
        company_logo:'',
        company_img:'',
        desc:''
      },
      // 验证规则
      rules: {
        license_name: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        // credit_code: [
        //   { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
        // ],
        // business_license:[
        //   { required: true, message: '请上传营业执照照片', trigger: 'click' },
        // ],
        mobile: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
      },
      imgs:[],
      userid:''
    }
  },
  methods: {
    // // 添加企业
    // addSubmit() {
    //   this.$refs[this.formName].validate((valid) => {
    //     if (valid) {
    //       addCompany(this.formFieldsData).then(res=>{
    //         this.formVisible = false
    //         this.getList()
    //       })
    //     } else {
    //       return false
    //     }
    //   })
    // },
    // 企业详情
    handleDetails(id) {
      this.$router.push({path:'/talents/companyDetails',query:{id:id}})
    },
    // 打开审核dialog
    handleExamine(item) {
      this.$refs.companyExamine.show(item)
    },
    // 被访问列表
    browseList(id) {
      this.$router.push('/talents/companyBrowse/'+id)
    },
    // 修改
    beforeUpdate(item) {
      this.formFieldsData.mobile = item.user_info.mobile
      this.imgs = item.company_img?item.company_img.split(','):[]
      this.userid = item.user_id
    },
    beforeSubmit() {
      this.formFieldsData.name = this.formFieldsData.license_name
      this.formFieldsData.company_img = this.imgs.join(',')
    },
    // 
    companySubmit() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          if (!this.id) {
            this.$http.post(this.url, this.formFieldsData).then(response => {
              this.handleResponse(response)
            })
          } else {
            let userParam = {
              mobile:this.formFieldsData.mobile
            }
            this.$http.put('/user/admin/user/'+this.userid, userParam).then(() => {
              this.$http.put(this.url + '/' + this.id, this.formFieldsData).then((response) => {
                this.handleResponse(response)
              })
            })
          }
        } else {
          return false
        }
      })
    },
    // 修改热门
    companyUpdate(item,key) {
      let param = {}
      param[key] = item[key]
      if (key == 'status') {
        param['remake'] = item['remake']
      }
      this.$http.put('profession/admin/company/'+item.id,param).then(response => {
        if (response.code === 10000) {
          this.$message.success(response.message)
          if (key == 'status') {
            this.$refs.companyExamine.hide()
          }
          this.getList()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    upImg(f) {
      this.upAxios(f,'business_license')
    },
    upImg1(f) {
      this.upAxios(f,'company_logo')
    },
    upImg2(f) {
      this.upAxios(f,'imgs')
    },
    upAxios(f,key) {
      let param = new FormData(); //创建form对象
      param.append('image',f.file);//通过append向form对象添加数据
      uploadImage(param).then((res)=>{
        if(res.code == 10000){
          if (key == 'imgs') {
            this.imgs.push(res.data.path)
          } else {
            this.formFieldsData[key] = res.data.path
          }
        }else{
          this.$message.error('已超时，请重新上传');
        }
      })
    }
  },
  components:{
    companyExamine
  }
}
</script>
<style lang="scss" scoped>
  .photo_box{
    width:160px;
    margin:0 10px 10px 0;
  }
  .img{
    margin:0 auto 14px;
    width: 160px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:contain;
  }
</style>